<script setup lang="ts">
import { PropType } from 'vue'
import { MenuItem } from './types'

let props = defineProps({
  menus: {
    type: Array as PropType<MenuItem[]>,
    required: true
  },

  defaultActive: {
    type: String,
    dafault: ''
  },

  router: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <el-row>
    <el-col :span="8">
      <el-menu :default-active="defaultActive" :router="router">
        <template v-for="(item, index) in props.menus" :key="index">
          <el-menu-item v-if="!item.children || item.children.length <= 0" :index="item.index">
            <component :is="item.icon"></component>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
          <el-sub-menu :index="item.index" v-else>
            <template #title>
              <component :is="item.icon"></component>
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item v-for="(itm, idx) in item.children" :key="idx">
              <component :is="item.icon"></component>
              <span slot="title">{{ itm.name }}</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu></el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
</style>
